<template>
  <Card :icon="icon" :title="title">
    <div class="nav jc-between">
      <div
        :class="`nav-item ${active == i ? 'active' : ''}`"
        v-for="(item, i) in categories"
        :key="i"
        @click="click(i)"
      >
        <div class="nav-link">{{ item.name }}</div>
      </div>
    </div>
    <div class="pt-3">
      <swiper
        :spaceBetween="20"
        :speed="1000"
        ref="list"
        @slideChange="slideChange"
        @swiper="onSwiper"
      >
        <swiper-slide v-for="(item, i) in categories" :key="i">
          <slot name="items" :category="item"></slot>
        </swiper-slide>
      </swiper>
    </div>
  </Card>
</template>

<script>
import { ref, onMounted } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
import Card from "@/components/Card.vue";
export default {
  props: {
    title: { type: String },
    icon: { type: String },
    categories: { type: Array },
  },
  components: {
    Swiper,
    SwiperSlide,
    Card,
  },
  setup() {
    const active = ref(0);
    const list = ref(null);
    const swiperData = ref(null);
    const onSwiper = (swiper) => {
      swiperData.value = swiper;
    };
    function slideChange(i) {
      active.value = i.activeIndex;
    }
    const click = (i) => {
      swiperData.value.slideTo(i, 1000);
    };

    return { active, slideChange, click, list, onSwiper };
  },
};
</script>

<style lang="scss" scoped>
.swiper-slide {
  height: 1px;
} /* 随意指定一个height值即可 */
.swiper-slide-active {
  height: auto;
}
</style>
